<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USERDETAIL</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        .body-box {
            height: 330px;
            width: 350px;
            margin-top: 30px;
            border-radius: 10px;
            background-color: #4A9ABB;
        }

        .top {
            padding: 10px;
            border-radius: 10px;
            background-color: #4A9ABB;
        }

        .top span {
            font-size: 20px;
            color: #fff;
        }

        .top a {
            margin-top: 10px;
            float: right;
            text-decoration: none;
            color: #fff;
        }

        .body-inp {
            padding: 15px 10px;
        }

        .body-inp input {
            width: 100%;
            height: 40px;
            padding: 10px;
        }

        .submit,
        .cancle {
            height: 30px;
            width: 60px;
            margin-top: 10px;
            margin-left: 20px;
            background-color: #F0F0F0;
        }

        .cancle {
            float: right;
            margin-right: 20px;
        }

        .pwdtext {
            display: none;
            color: red;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class='row'>
            <div class='col-xs-12 col-sm-12 col-md-3 sidebar'>
                <!-- ================================== TOP NAVIGATION ================================== -->
                <div class="side-menu animate-dropdown outer-bottom-xs">
                    <div class="head"><i class="icon fa fa-align-justify fa-fw"></i> 账户管理</div>
                    <nav class="yamm megamenu-horizontal">
                        <ul class="nav">
                            <li>
                                <a href="userdetail.html" class="dropdown-toggle " th:href="@{/User/userdetail}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="useraddress.html" class="dropdown-toggle " th:href="@{/User/useraddress}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收货地址</a>
                            </li>
                            <li>
                                <a href="userwishlist.html" class="dropdown-toggle" th:href="@{/User/userwishlist}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>收藏</a>
                            </li>
                            <li>
                                <a href="usercart.html" class="dropdown-toggle" th:href="@{/User/usercart}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>购物车</a>
                            </li>
                            <li>
                                <a href="changepwd.html" class="dropdown-toggle active" th:href="@{/User/changepwd}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>更改密码</a>
                            </li>
                            <li>
                                <a href="userorder.html" class="dropdown-toggle " th:href="@{/User/userorder}">
                                    <i class="icon fa fa-shopping-bag" aria-hidden="true"></i>订单</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </nav>
                    <!-- /.megamenu-horizontal -->
                </div>
                <!-- /.side-menu -->
            </div>
            <div class="col-xs-12 col-sm-12 col-md-9">
                <div class="body-box">
                    <div class="top">
                        <span>修改密码</span><a href="#">返回首页</a>
                    </div>
                    <div class="body-inp">
                        <input type="password" id="NowPwd" placeholder="当前密码">
                    </div>
                    <div class="body-inp">
                        <input type="password" id="NewPwd" placeholder="新密码">
                    </div>
                    <div class="body-inp">
                        <input type="password" id="AginPwd" placeholder="确认新密码">
                        <span class="pwdtext">密码不一致!</span>
                    </div>
                    <button id="submit" class="submit">提交</button>
                    <button id="cancle" class="cancle">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="assets/js/jquery-1.11.1.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script>
    $(document).ready(function () {
        var flag = false;
        $("#cancle").click(function () {
            $("#NowPwd").val("");
            $("#NewPwd").val("");
            $("#AginPwd").val("");
            $(".pwdtext").hide();
        });
        $("#AginPwd").blur(function () {
            var NewPwd = $("#NewPwd").val();
            var AginPwd = $("#AginPwd").val();
            if (AginPwd == NewPwd) {
                $(".pwdtext").hide();
                flag = true;
            } else
                $(".pwdtext").show();
        });

        $("#submit").bind('click', function () {//提交
            var NowPwd = $("#NowPwd").val();
            var NewPwd = $("#NewPwd").val();
            var AginPwd = $("#AginPwd").val();
            if (flag) {
                $.ajax({
                    type: "post",
                    url: "/User/pwdChange/data",
                    data: {
                        OldPwd: NowPwd,
                        NewPwd: NewPwd
                    },
                    success: function (data) {
                        if (data == "yes")
                            window.location.href = "/User/Login";
                        else
                            alert("更改失败!");
                    }
                });
            } else alert("两次密码不相同！");
        });
    });
</script>
</body>

</html>